﻿@model  List<FTBS.Models.Entities.Theater>

<html>
@{
    var searchSchedule = (FTBS.Models.Entities.Concert.SearchSchedule)ViewBag.SearchSchedule;
    var isFirstTimeLoadTheater = false;
    if (ViewBag.IsFirstTimeLoadTheater == null)
    {
        isFirstTimeLoadTheater = true;
    }
    var firstTheaterId = ViewBag.FirstItemTheaterId;
    var firstFilmId = ViewBag.FirstItemFilmId;
}
<body>
    <div class="grid">
        @foreach (var theater in Model)
        {
            <div class="row">
                <div class="span5">
                    <div class="listview">
                        @if (Model.IndexOf(theater) == 0)
                        {
                            <a href="#" class="list selected" id="theaterItem @theater.TheaterId"  onclick="ChangeTypeTheater(@theater.TheaterId)">
                                <div class="list-content" onclick="loadShowTimeByTheaterId(@theater.TheaterId, @searchSchedule.FilmId)">
                                    <img src="~/Image/Theater/@theater.ImageURL" class="icon" />
                                    <div class="data">
                                        <span class="list-title" style="font-weight: bold; font-size: 14px">@theater.TheaterName</span>
                                        <span class="list-subtitle" style="font-size: 12px">@theater.Address</span>
                                    </div>
                                </div>
                            </a>
                        }
                        else
                        {
                            <a href="#" class="list" id="theaterItem @theater.TheaterId"  onclick="ChangeTypeTheater(@theater.TheaterId)">
                                <div class="list-content" onclick="loadShowTimeByTheaterId(@theater.TheaterId, @searchSchedule.FilmId)">
                                    <img src="~/Image/Theater/@theater.ImageURL" class="icon" />
                                    <div class="data">
                                        <span class="list-title" style="font-weight: bold; font-size: 14px">@theater.TheaterName</span>
                                        <span class="list-subtitle" style="font-size: 12px">@theater.Address</span>
                                    </div>
                                </div>
                            </a>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
</body>
</html>

<script>
    function ChangeTypeTheater(theaterId) {
        var idTag = "theaterItem" + " " + theaterId;
        document.getElementById(theaterId)
        var classValue = document.getElementById(idTag).getAttribute("class");

        if (classValue == "list selected") {
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
        else {
            $("a[id^='theaterItem']").attr('class', 'list');
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
    }
    $(document).ready(function () {
        var firstItemTheaterId = @firstTheaterId;
        var firstItemFilmId = @firstFilmId;
        loadShowTimeByTheaterId(firstItemTheaterId, firstItemFilmId);
    });
    
</script>




